<template>
    <page-meta :page-style="'overflow:' + (scrollShow ? 'hidden' : 'visible')"> </page-meta>
    <view class="integral-shopping-main">
        <integralHead
            :isIntegralMall="1"
            :currentIntegral="availablePoints || 0"
            @close="scrollShow = false"
            @open="scrollShow = true" />
        <view class="integral-shopping-container">
            <view class="head"><view class="line"></view><view class="title">积分兑换</view></view>
            <view v-if="Data.dataList.length" class="goods-list">
                <view class="goods-left">
                    <view
                        v-for="(item, index) in Data.leftData"
                        :key="index"
                        @click="goToGoodDetail(item)"
                        class="goods-item">
                        <view class="zw-empty">
                            <image :src="item.coverUrl || item.goodsImg" class="img" />
                            <GoodsImgStatus v-if="item.onSale == 3" />
                        </view>
                        <view class="title">{{ item.goodsName }}</view>
                        <view class="goods-item-bottom">
                            <view>
                                <!-- 虚拟商品金额显示 -->
                                <view class="goods-money" v-if="item.money && item.goodsType != 1">
                                    <text class="price">{{ priceNum(item.money, 0) }}</text>
                                    <text v-if="priceNum(item.money, 1)">.{{ priceNum(item.money, 1) }} </text>
                                    <text class="goods-dooler">元</text>
                                    <text class="goods-dooler" style="margin-left: 7rpx">+</text>
                                </view>
                                <!-- 虚拟商品积分显示 -->
                                <view class="bottom-left" v-if="item.goodsType != 1">
                                    <view class="integral-num">
                                        <view v-if="floatDivide(item.points, 100) >= 100000" class="num">
                                            <text>{{ getPoint(floatDivide(item.points, 100)) }}</text>
                                        </view>
                                        <view v-else>{{ floatDivide(item.points, 100) }}</view>
                                    </view>
                                    <view class="integral-unit">积分</view>
                                </view>
                                <!-- 商城商品统一兑换比例积分显示 -->
                                <view
                                    class="bottom-left"
                                    v-if="item.goodsType == 1 && item.pointsConfig.pointsConsumerType == 1">
                                    <view class="integral-num">
                                        <view v-if="item.points >= 100000" class="num">
                                            <text>{{ getPoint(item.points) }}</text>
                                        </view>
                                        <view v-else>{{ item.points }}</view>
                                    </view>
                                    <view class="integral-unit">积分</view>
                                </view>
                                <!-- 商城商品自定义兑换金额显示 -->
                                <view
                                    class="goods-money"
                                    v-if="
                                        item.goodsType == 1 &&
                                        item.goodsMinPrice &&
                                        item.pointsConfig.pointsConsumerType == 2
                                    ">
                                    <text class="price">{{ priceNum(item.goodsMinPrice, 0) }}</text>
                                    <text v-if="priceNum(item.goodsMinPrice, 1)"
                                        >.{{ priceNum(item.goodsMinPrice, 1) }}
                                    </text>
                                    <text class="goods-dooler">元</text>
                                    <text class="goods-dooler" style="margin-left: 7rpx">+</text>
                                </view>
                                <!-- 商城商品自定义兑换积分显示 -->
                                <view
                                    class="bottom-left"
                                    v-if="item.goodsType == 1 && item.pointsConfig.pointsConsumerType == 2">
                                    <view class="integral-num">
                                        <view v-if="item.points >= 100000" class="num">
                                            <text>{{ getPoint(item.points) }}</text>
                                        </view>
                                        <view v-else>{{ item.points }}</view>
                                    </view>
                                    <view class="integral-unit">积分</view>
                                </view>
                            </view>
                            <view class="bottom-right" v-if="item.onSale != 3">立即兑换</view>
                            <view class="bottom-right bottom-disabled" v-else @click.stop>已售罄</view>
                        </view>
                    </view>
                </view>
                <view class="goods-right">
                    <view
                        v-for="(item, index) in Data.rightData"
                        :key="index"
                        @click="goToGoodDetail(item)"
                        class="goods-item">
                        <view class="zw-empty">
                            <image :src="item.coverUrl || item.goodsImg" class="img" />
                            <GoodsImgStatus v-if="item.onSale == 3" />
                        </view>
                        <view class="title">{{ item.goodsName }}</view>
                        <view class="goods-item-bottom">
                            <view>
                                <!-- 虚拟商品金额显示 -->
                                <view class="goods-money" v-if="item.money && item.goodsType != 1">
                                    <text class="price">{{ priceNum(item.money, 0) }}</text>
                                    <text v-if="priceNum(item.money, 1)">.{{ priceNum(item.money, 1) }} </text>
                                    <text class="goods-dooler">元</text>
                                    <text class="goods-dooler" style="margin-left: 7rpx">+</text>
                                </view>
                                <!-- 虚拟商品积分显示 -->
                                <view class="bottom-left" v-if="item.goodsType != 1">
                                    <view class="integral-num">
                                        <view v-if="floatDivide(item.points, 100) >= 100000" class="num">
                                            <text>{{ getPoint(floatDivide(item.points, 100)) }}</text>
                                        </view>
                                        <view v-else>{{ floatDivide(item.points, 100) }}</view>
                                    </view>
                                    <view class="integral-unit">积分</view>
                                </view>
                                <!-- 商城商品统一兑换比例积分显示 -->
                                <view
                                    class="bottom-left"
                                    v-if="item.goodsType == 1 && item.pointsConfig.pointsConsumerType == 1">
                                    <view class="integral-num">
                                        <view v-if="item.points >= 100000" class="num">
                                            <text>{{ getPoint(item.points) }}</text>
                                        </view>
                                        <view v-else>{{ item.points }}</view>
                                    </view>
                                    <view class="integral-unit">积分</view>
                                </view>
                                <!-- 商城商品自定义兑换金额显示 -->
                                <view
                                    class="goods-money"
                                    v-if="
                                        item.goodsType == 1 &&
                                        item.goodsMinPrice &&
                                        item.pointsConfig.pointsConsumerType == 2
                                    ">
                                    <text class="price">{{ priceNum(item.goodsMinPrice, 0) }}</text>
                                    <text v-if="priceNum(item.goodsMinPrice, 1)"
                                        >.{{ priceNum(item.goodsMinPrice, 1) }}
                                    </text>
                                    <text class="goods-dooler">元</text>
                                    <text class="goods-dooler" style="margin-left: 7rpx">+</text>
                                </view>
                                <!-- 商城商品自定义兑换积分显示 -->
                                <view
                                    class="bottom-left"
                                    v-if="item.goodsType == 1 && item.pointsConfig.pointsConsumerType == 2">
                                    <view class="integral-num">
                                        <view v-if="item.points >= 100000" class="num">
                                            <text>{{ getPoint(item.points) }}</text>
                                        </view>
                                        <view v-else>{{ item.points }}</view>
                                    </view>
                                    <view class="integral-unit">积分</view>
                                </view>
                            </view>
                            <view class="bottom-right" v-if="item.onSale != 3"> 立即兑换 </view>
                            <view class="bottom-right bottom-disabled" v-else @click.stop>已售罄</view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else class="no-data">
                <img class="empty" :src="getImgOssUrl('/ui-prod-2.3.0/empty-addr@2x.png')" />
                暂无数据
            </view>
            <view class="list-loading">
                {{ isBottom && Data.dataList.length ? (listLoading ? '加载中…' : '已经到底啦！') : '' }}
            </view>
            <Loading />
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import router from '@/router';
import { onReachBottom, onPageScroll, onShow } from '@dcloudio/uni-app';
import request from '@/request';
import storage from '@/commons/storage';
import { getImgOssUrl, floatDivide, checkToken } from '@/commons/utils';
import integralHead from '@/components/integralHead';
import Loading from '@/components/el-loading';
import GoodsImgStatus from '@/components/goodsImgStatus';
let listLoading = ref(false);
let availablePoints = ref(0);
let scrollShow = ref(false);
const Data = reactive({
    dataList: [],
    page: 1,
    perPage: 10,
    scrollTop: 0,
    totalCount: 0,
    leftData: [],
    rightData: []
});

const isBottom = computed(() => {
    return Data.scrollTop > 50;
});
const priceNum = (amount, index) => {
    let price = floatDivide(amount, 100);
    let list = [];
    try {
        list = price.toString().split('.');
    } catch (e) {
        list = [Number(price)];
    }
    return list[index];
};
const getMemberInfo = () => {
    request('memberInfo').then(res => {
        availablePoints.value = res.data.availablePoints ? floatDivide(res.data.availablePoints, 100) : 0;
    });
};
const goToGoodDetail = item => {
    // if (item.onSale == 3) {
    //     uni.showToast({
    //         title: '商品已售罄',
    //         icon: 'none'
    //     });
    //     return;
    // }
    //商品类型1普通商品 2虚拟商品优惠券 3 虚拟商品抽奖机会
    if (item.goodsType == 1) {
        const { goodsId } = item;
        router.push({
            path: '/pages-cart/good/index',
            query: {
                from: 'integral',
                goodsId
            }
        });
    } else {
        const { id, goodsType } = item;
        router.push({
            path: '/pages-cart/good/virtualDetail',
            query: {
                id,
                goodsType
            }
        });
    }
};
const getMallList = async () => {
    listLoading.value = true;
    const { page, perPage } = Data;
    const shopId = storage.get('ZW_SHOP_ID');
    let res = await request('integralMallList', {
        shopId,
        page,
        perPage
    });
    let list = res.data.list || [];
    if (page === 1) {
        Data.dataList = list;
    } else {
        list.forEach(item => {
            Data.dataList.push(item);
        });
    }
    list.map(item => {
        if (item.goodsType == 1 && item.skuInfo) {
            item.skuInfo.sort((prev, current) => prev.skuPrice - current.skuPrice);
            const minPriceSku = item.skuInfo[0];
            const { pointsConsumerType } = item.pointsConfig;
            if (minPriceSku) {
                if (minPriceSku.money !== null) {
                    item.goodsMinPrice = minPriceSku.money;
                    item.points = pointsConsumerType == 1 ? minPriceSku.consumerPoints / 100 : minPriceSku.points / 100;
                }
            }
        }
        return item;
    });
    list.forEach((item, index) => {
        if ((index + 1) % 2) {
            Data.leftData.push(item);
        } else {
            Data.rightData.push(item);
        }
    });
    listLoading.value = false;
    Data.totalCount = res.data.totalCount;
};

getMallList();
onShow(async () => {
    (await checkToken()) && getMemberInfo();
});
onPageScroll(e => {
    Data.scrollTop = e.scrollTop;
});
// 上拉加载
onReachBottom(() => {
    if (Data.totalCount === Data.dataList.length) {
        return;
    }
    Data.page++;
    getMallList();
});
const getPoint = data => {
    return data.toString().split('').splice(0, 5).join('') + '...';
};
</script>
<style lang="scss" scoped>
.integral-shopping-main {
    .integral-shopping-container {
        background-color: #ffffff;
        .head {
            display: flex;
            align-items: center;
            height: 87rpx;
            line-height: 87rpx;
            padding: 0 29rpx;
            border-bottom: 2rpx solid #f5f5f5;
            margin-top: 18rpx;
            font-size: 29rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            .line {
                width: 5rpx;
                height: 29rpx;
                background: #fe292b;
                border-radius: 4rpx;
                margin-right: 11rpx;
            }
            .title {
                font-size: 29rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 29rpx;
            }
        }
        .goods-list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 29rpx;
            .goods-item {
                width: 337rpx;
                margin-bottom: 18rpx;
                padding-bottom: 18rpx;
                background: #ffffff;
                border-radius: 14rpx;
                border: 2rpx solid #f5f5f5;
                .img {
                    width: 337rpx;
                    height: 337rpx;
                    border-radius: 14rpx 14rpx 0 0;
                }
                .title {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    word-break: break-all;
                    overflow: hidden;
                    margin-top: 16rpx;
                    padding: 0 16rpx;
                    font-size: 29rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 40rpx;
                    text-overflow: ellipsis;
                }
                .goods-item-bottom {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 22rpx;
                    padding: 0 16rpx;
                    .goods-money {
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 600;
                        color: #fe292b;
                        font-size: 24rpx;
                        .price {
                            font-size: 36rpx;
                        }
                        .goods-dooler {
                            font-size: 22rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #fe292b;
                            line-height: 22rpx;
                            margin-left: 4rpx;
                        }
                    }
                    .bottom-left {
                        display: flex;
                        align-items: flex-end;
                        line-height: 29rpx;
                        .integral-num {
                            font-size: 36rpx;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #fe292b;
                            .num {
                                line-height: 22rpx;
                            }
                            .thousand {
                                font-size: 20rpx;
                            }
                        }
                        .integral-unit {
                            font-size: 22rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #fe292b;
                            line-height: 22rpx;
                            margin-left: 4rpx;
                        }
                    }
                    .bottom-right {
                        padding: 11rpx 16rpx;
                        background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
                        border-radius: 27rpx;
                        font-size: 24rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                        flex-shrink: 0;
                    }
                    .bottom-disabled {
                        color: #ffff !important;
                        background: #cccccc !important;
                    }
                }
            }
        }
        .no-data {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 78vh;
            .empty {
                width: 279rpx;
                height: 216rpx;
            }
        }
    }
    .list-loading {
        text-align: center;
        font-size: 28rpx;
        font-weight: 300;
        color: #999999;
        line-height: 22rpx;
    }
    .zw-empty {
        position: relative;
    }
}
</style>
